import React, { useEffect, useState } from "react";
import { CommonHeader } from "@/components/Layout/Header";
import ProjectItem from "./components/projectItem";
import style from "./index.module.less";
import { db} from "@/service";


const ToolsList = () => {

  const [list, setList] = useState<any>({});
 
  const query = async () => {
    const res= await db.collection("payloads").field({
      type:true,
      elements:true,
      diagramId:true,
      _id:true,
    })
    .get()
    let list:any=[];
    for(let i=0;i<res.data.length;i++) {
      list.push(
        {
          id:res.data[i].diagramId,
          image:"https://bpic.588ku.com/element_origin_min_pic/19/04/09/b8affb770ac8edb4e5bab13640d92550.jpg",
          title: "我的项目"+i,
          date:res.data[i].type,
          type:res.data[i].type,
          elements:res.data[i].elements,
        } 
      );
    }
    setList(list);
    return res.data; 
  };
  
  useEffect(()=>{
    query();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  },[]);

  return (
    <div className={style.container}>
      <CommonHeader />
      <div>
        <div className={style.title}>我的工具</div>
        <div className={style.toolItemContainer}>
        {Array.isArray(list)?list.map((item:any) => (
          <ProjectItem {...item} key={item}></ProjectItem>
        )):null}
        </div>
      </div>
    </div>
  );
};
export default ToolsList;